import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num,
} from '../../actions/IndexAction'
import base from "../base"
import { AtTabs, AtSearchBar,AtAvatar,AtButton } from 'taro-ui'
import './index.less'
import set from "../../apis/api"
var search_page=1;
import LineChart from '../../components/LineChart'
import {push} from "echarts/lib/component/dataZoom/history";
class chartDetail extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      jzlist:[],
      value:"",
      dateSel: '2020-01-01',
      airOption: {
        ylength: 0,
        y: [],
        x1: [],
        x2: [],
        x3: [],
        x4: [],
      },
      powerOptions: {
        type: "line",
        // title: {
        //   text: '四路交流电量'
        // },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: ['市总电', '环控用电', '通信设备用电', '油机发电']
        // },
        grid: {
          top: "2%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "90%",
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            show: true,

            interval: 20, //显示所有X轴信息
            rotate: 40 //倾斜角度
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            symbol: 'none',
            data: []
          },
        ]
      },
      hfOptions: {
        // title: {
        //   text: '四路交流电量'
        // },
        type: "line",
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   left:'center',
        //   data: ['回风温度',  '室内温度', '室外温度']
        // },
        grid: {
          top: "2%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "90%",
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:01', '00:02', '00:03', '00:04', '00:05', '00:06', '00:07']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '回风温度',
            type: 'line',
            symbol: 'none',
            data: []
          },
          // {
          //   name: '湿度',
          //   type: 'line',
          //   symbol: 'none',
          //   data: []
          // },
          {
            name: '室内温度',
            type: 'line',
            symbol: 'none',
            data: []
          },
          {
            name: '室外温度',
            type: 'line',
            symbol: 'none',
            data: []
          }
        ]
      },
      detail:null,
    }
  }

  config = {
    navigationBarTitleText: '运行详情',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {
  //  this.subSearch()


  }
  /**
   *
   * 获取图表详情
   */


  onDateChange(e) {
    this.setState({
      dateSel: e.detail.value
    }, this.jzgetRangeList)
  }
  writeCurrentDate() {

    var day1 = new Date();
    day1.setTime(day1.getTime());
    var m=day1.getMonth() + 1;
    if(m<10)
    {
      m="0"+m;
    }
    var d=day1.getDate();
    if(d<10)
    {
      d="0"+d;
    }
    var dateSel = day1.getFullYear() + "-" + m + "-" + d;
    //今天的时间
    // var day2 = new Date();
    // day2.setTime(day2.getTime());
    // var dateSel = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
    this.setState({
      dateSel: dateSel
    })
  }
  jzgetRangeList() {
    wx.showLoading({title: "加载中"})
    var databody = {
      b_id: this.state.detail.b_id,
      access_token: this.props.gytoken.gytoken,
 //     access_token:'5bffa5ba-31d2-44c5-b039-52322c2cb0a6-1636268275-824166',

      dt: this.state.dateSel,
      // end_dt: this.state.dateSel
      name:this.state.detail.name
    }
    //显示图表
    this.wx_request(set.get_devchart, databody, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data) => {
      wx.stopPullDownRefresh();
      wx.hideLoading();
      var list=data.data.data;
      console.log("详情",this.state.detail)
      console.log("收到的数据",list)
      if(this.state.detail.chart_type=='line')
      {
        var x=[];
        var y=[];
        list.map((item)=>{
          x.push(item.add_date);
          y.push(item.val)
        })


        this.state.powerOptions.xAxis.data=x;
        this.state.powerOptions.series[0].data=y;
        this.state.powerOptions.series[0].name=this.state.detail.cn_name;
        this.setState({
          powerOptions:this.state.powerOptions
        },()=>{
          this.lineChart.refresh(this.state.powerOptions);
        })
      }
      if(this.state.detail.chart_type=='bar'){
        var tempDt = [];

        var tempX1 = {};
        var new_tempX1 = [];

        list.map((item) => {
          var add_date=item.add_date.replace(/(^\s*)|(\s*$)/g, "")
          var hh = add_date.substr(0, 2);
          // tempDt.push(hh)
          if (!tempX1[hh]) {
            tempX1[hh] = [];
          }
          tempX1[hh].push(parseInt(item.val))
        })

        for (var i=0; i<24;i++)
        {
          var d=i;
          if(i<10)
          {
            d='0'+i;
          }
          tempDt.push(d+"")
          if(!tempX1[d+""])
          {
            tempX1[d+""]=[]
          }

        }



        this.state.airOption.y = tempDt;
        if (Object.keys(tempX1).length != 0) {
          Object.keys(tempX1).sort().forEach(function (key) {
            new_tempX1.push(tempX1[key])
          });
        }
        this.state.airOption.x1 = new_tempX1;
        this.setState({
          airOption: this.state.airOption,
        })
        console.log(this.state.airOption)


      }
      wx.hideLoading()

    }).catch((err) => {

      console.log(err)
      wx.hideLoading();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '网络访问失败，请重试',
        icon: 'none',
        duration: 1800
      })
    })
  }
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    search_page=1;
    this.setState({
      jzlist:[]
    },()=>{
     // this.subSearch();
    })

    wx.stopPullDownRefresh();
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    wx.showLoading()
    this.writeCurrentDate()
    this.onPullDownRefresh()
    // console.log("传过来的",this.$router.params.item);
    var data = JSON.parse(this.$router.params.item)
    // var data={"name":"AIRSW1","cn_name":"开关1","inc_type":"data","value":"0","chart_type":"bar","b_id":"443"};
    this.setState({
      detail:data
    },()=>{
      this.jzgetRangeList()
    })

    //get_devchart

  }

  refLineChart = (node) => {
    console.log("调用了");
    this.lineChart = node
  }



  componentDidHide() {
  }

  render() {
    const { airOption,detail} = this.state;
    return (
      <View style={{background:"#f0f2f5",minHeight:"100vh"}}>
        {/*<View style={{flex: 1,backgroundColor:"#b9fed1",   backgroundImage: `url("http://wx.engconn.com/static/images-lp/bai.jpg")`,*/}
        {/*backgroundRepeat: "no-repeat",*/}
        {/*backgroundSize: "100%",}}>*/}
        {/*<View style={{display: "flex"}}>*/}
        {/*<View style={{flex: 1, padding: "20rpx"}} onClick={this.changeModel.bind(this)}>*/}
        {/*{showModel ? <View style={{*/}
        {/*borderRadius: "40rpx",*/}
        {/*height: "70rpx",*/}
        {/*backgroundColor: "#eeeeee",*/}
        {/*width: "300rpx",*/}
        {/*display: "flex"*/}
        {/*}}>*/}
        {/*<View style={{*/}
        {/*borderRadius: "35rpx",*/}
        {/*height: "70rpx",*/}
        {/*backgroundColor: "#22ad38",*/}
        {/*flex: 1,*/}
        {/*display: "flex",*/}
        {/*alignItems: "center",*/}
        {/*justifyContent: "center"*/}
        {/*}}>*/}
        {/*<Text style={{fontSize: "26rpx", color: "#ffffff"}}>普通模式</Text>*/}
        {/*</View>*/}
        {/*<View style={{*/}
        {/*borderRadius: "35rpx",*/}
        {/*height: "70rpx",*/}
        {/*flex: 1,*/}
        {/*display: "flex",*/}
        {/*alignItems: "center",*/}
        {/*justifyContent: "center"*/}
        {/*}}>*/}
        {/*<Text style={{fontSize: "26rpx", color: "#919191"}}>图表模式</Text>*/}
        {/*</View>*/}
        {/*</View>*/}
        {/*: <View style={{*/}
        {/*borderRadius: "40rpx",*/}
        {/*height: "70rpx",*/}
        {/*backgroundColor: "#eeeeee",*/}
        {/*width: "300rpx",*/}
        {/*display: "flex"*/}
        {/*}}>*/}
        {/*<View style={{*/}
        {/*borderRadius: "35rpx",*/}
        {/*height: "70rpx",*/}
        {/*flex: 1,*/}
        {/*display: "flex",*/}
        {/*alignItems: "center",*/}
        {/*justifyContent: "center"*/}
        {/*}}>*/}
        {/*<Text style={{fontSize: "26rpx", color: "#919191"}}>普通模式</Text>*/}
        {/*</View>*/}
        {/*<View style={{*/}
        {/*borderRadius: "35rpx",*/}
        {/*height: "70rpx",*/}
        {/*backgroundColor: "#22ad38",*/}
        {/*flex: 1,*/}
        {/*display: "flex",*/}
        {/*alignItems: "center",*/}
        {/*justifyContent: "center"*/}
        {/*}}>*/}
        {/*<Text style={{fontSize: "26rpx", color: "#ffffff"}}>图表模式</Text>*/}
        {/*</View>*/}
        {/*</View>}*/}
        {/*</View>*/}
        <View style={{padding: "20rpx"}}>
        <View style={{display:"flex",alignItems:"center"}}>
          <Text style={{color:"#333333",fontSize:"36rpx"}}>
            日期：
          </Text>
        <Picker mode='date' onChange={this.onDateChange.bind(this)}>
        <View style={{
        borderRadius: "35rpx",
        height: "70rpx",
        backgroundColor: "#eeeeee",
        flex: 1,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
        }}>
        <Text style={{fontSize: "36rpx", color: "#666666"}}>{this.state.dateSel} ▼</Text>
        </View>
        </Picker>
        </View>
        </View>
        {/*</View>*/}
        <View hidden={false} style={{flex: 1}}>
          {detail&&detail.chart_type=='line'&&<View style={{width: "100%", height: "600rpx"}}>
            <LineChart ref={this.refLineChart}/>
          </View>}
          {detail&&detail.chart_type=='bar'&&<View style={{width: "100%", height: "600rpx", marginTop: "40rpx"}}>
            <View style={{paddingLeft: "10rpx"}}>
              <View style={{width: "96%", height: "100rpx", position: "relative", left: "2%",borderBottom:"1px solid #cccccc",borderTop:"1px solid #cccccc"}}>
                <View
                  style={{
                    position: "absolute",
                    left: 0,
                    bottom: 0,
                    top: 0,
                    right:0,
                    display: "flex",
                    flexDirection: "row",
                    borderLeft: "1px solid #cccccc",
                  }}>
                  {airOption.y.map((item,i)=>{
                    return(<View key={i} style={{flex:1,borderRight:"1px solid #cccccc",height:"100%",position:"relative"}}>
                      <View style={{position: "absolute", left: "-16rpx", top: "90rpx"}}>
                        <Text style={{color: "#666666", fontSize: "16rpx"}}>
                          {item}
                        </Text>
                      </View>
                    </View>)
                  })
                  }

                </View>
                <View
                  style={{
                    position: "absolute",
                    left: 0,
                    bottom: 0,
                    top: 0,
                    right:0,
                    flexDirection: "row",
                  }}>
                  <View style={{height:"80%",width:"100%",backgroundColor:"#cccccc",display:"flex"}}>
                    {airOption.x1.map((item,i)=>{
                      return( <View key={i} style={{height:"100%",flex:1,display:"flex"}}>
                        {item.map((sub,sk)=>{
                          return(<View key={sk} style={{height:"100%",flex:1,display:"flex"}}>
                            {sub!=0?<View style={{height:"100%",flex:1,display:"flex",backgroundColor:"#3ab54a"}}>

                            </View>: <View style={{height:"100%",flex:1,display:"flex"}}>

                            </View>}

                          </View>)
                        })
                        }

                      </View>)

                    })}
                  </View>
                </View>
              </View>
            </View>

          </View>}
        </View>
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,sys_config:state.sys_config,
    gytoken:state.gytoken,
    location:state.location,
  }
}
export default connect(mapstate)(chartDetail)

